<template>
  <div class="layout">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"

      >
        <el-form-item label="活动标题">
          <el-input
            v-model="formInline.sharingTitle"
            placeholder="请输入活动标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动副标题">
          <el-input
            v-model="formInline.sharingSubtitle"
            placeholder="请输入活动副标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动简介">
          <el-input
            v-model="formInline.sharingIntroduce"
            placeholder="请输入活动简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="邀请嘉宾">
          <el-input
            v-model="formInline.honouredGuest"
            placeholder="请输入邀请嘉宾"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否发布" prop="isRelease">
          <el-radio-group v-model="formInline.isRelease">
          <el-radio  label="1">是</el-radio>
          <el-radio   label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否外链" prop="isLink">
          <el-radio-group v-model="formInline.isLink">
            <el-radio  label="1">是</el-radio>
          <el-radio   label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="GenTable"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdat()"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete"
              >删除</el-button
            >
        </el-col>

        <el-button icon="el-icon-search" circle class="search" @click="onSubmit"></el-button>
        <el-button icon="el-icon-refresh" circle class="refresh"  @click="onReset"></el-button>
      </el-row>
    </div>
    <div class="wrapper">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="sharingTitle" label="活动标题" align="center">
        </el-table-column>
        <el-table-column prop="sharingSubtitle" label="活动副标题" align="center">
        </el-table-column>
        <el-table-column prop="sharingIntroduce" label="活动简介" align="center">
        </el-table-column>
        <el-table-column prop="sharingContent" label="活动内容" align="center">
         <template slot-scope="scope">
            <span v-html="scope.row.sharingContent"></span>
          </template>  
        </el-table-column>
        <el-table-column prop="sharingSign" label="活动标记" align="center">
        </el-table-column>
        <el-table-column prop="coverUrl" label="活动封面" align="center">
          <template slot-scope="scope">
            <el-image :src="baseUrl + scope.row.coverUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="honouredGuest" label="邀请嘉宾" align="center">
        </el-table-column>
        <el-table-column prop="isRelease" label="是否发布" align="center">
          <template v-slot="scope1">
            <el-switch
              v-model="scope1.row.isRelease"
              active-value="1"
              inactive-value="0"
              @change="change(scope1.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isLink" label="是否外链" align="center">
        </el-table-column>
        <el-table-column prop="author" label="作者" align="center">
        </el-table-column>
        <el-table-column prop="link" label="链接" align="center">
        </el-table-column>
          
        <el-table-column prop="remark" label="备注" align="center">

        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="pagination">
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.offset"
      background
      :page-sizes="[2, 5, 7, 10]"
      :page-size="tableData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { getKnowledge,delKnowledge,uptKnowledge} from "../../../api/api/api";
import "highlight.js/styles/github-gist.css";
export default {
  name: "knowledge",
  created() {
     this.getUserList()
  },
  data() {
    return {
      //分页
      currentPage4: 1,

      baseUrl: process.env.VUE_APP_BASE_API,
      
      //排序
      num: 1,
      shuju:'',
      //备注
      textarea: "",
      loading:false,
      multipleSelection: [],
      total:0,

      formInline:{
        sharingTitle: "",
        sharingSubtitle: "",
        sharingIntroduce: "",
        honouredGuest: "",
        isRelease: null,
        isLink: null,
      },
      formLabelWidth: "120px",
      tableData: [
        {
          sharingId: "",
          sharingTitle: "",
          sharingSubtitle: "",
          sharingIntroduce: " ",
          sharingContent: "",
          sharingSign: "",
          coverUrl: "",
          honouredGuest: "",
          isRelease:null,
          isLink:"",
          link:'',
          author:'',
          remark:'',
          limit:'',
          offset:'',
        },
      ],
      base:{},
    };
  },

  methods: {
     change(row){
      this.base = row
      console.log(row);
        this.updateUser()
    },
    updateUser(){
      uptKnowledge(this.base).then(res=>{
          this.getUserList()
      })
    },
    getUserList(){
      this.loading = true;
      getKnowledge(this.formInline).then(res=>{
        console.log(res.rows);
        this.tableData=res.rows
         this.loading = false;
         this.total =res.rows.length
      })
    },
    //删除
    delUser(ids){
      delKnowledge(ids).then((res)=>{
        console.log();
        this.getUserList()

      })
    },
    // 查询
    onSubmit() {
      this.getUserList();
      // console.log("submit!", this.formInline);
      // const filterPersons = this.tableData.filter(
      //   (formInline) =>
      //     formInline.tip == this.formInline.tip ||
      //     formInline.release == this.formInline.release
      // );
      // this.tableData = filterPersons;
      // this.getUserList()
    },
    //重置
    onReset() {
      (this.formInline = {
        sharingTitle: "",
        sharingSubtitle: "",
        sharingIntroduce: "",
        honouredGuest: "",
        isRelease: null,
        isLink: null,
      }),
        this.getUserList();
    },
    //修改
    handleUpdate(row) {
      // this.eidtForm = row
    this.$router.push({
      path:'/homepageManagement/homepageManagement/knowledge/kadd',
      query:{
        row:row
      }
    });

    },
    handleUpdat() {
    this.$router.push({
      path:'/homepageManagement/homepageManagement/knowledge/kadd',
      query:{
        ro:this.shuju
      }
    });

    },
    //删除
    handleDelete(row) {
      console.log("ss", row);

      // this.tableData.splice(row, 1);
      this.$confirm('是否删除轮播图信息?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          let ids;
          if (this.multipleSelection.length){
            ids = this.multipleSelection;
            console.log("qq",ids);
          } else {
          if(row) {
              ids = row.sharingId;
            }
          }
          this.delUser(ids);
          // this.tableData.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //新增
    GenTable() {
      // this.tableData.push({ ...this.eidtForm });
      this.$router.push('/homepageManagement/homepageManagement/knowledge/kadd');
    },
    //排序
    handleChange(value) {
      console.log("de", value);
    },
    //分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //勾选
    handleSelectionChange(val = []) {
      this.shuju = val[0]
      this.multipleSelection = [];
      val.forEach((item) => this.multipleSelection.push(item.sharingId));
      console.log(val);
    },

  },
};
</script>

<style scoped>
.headtop {
  width: 200px;
  background: #666;
  position: fixed;
  top: 0;
  bottom: 0;
}
.comtant {
  margin-left: 200px;
}
.layout {
  margin-top: 20px;
}
.el-button--success.is-plain {
  margin-left: 10px;
}
.el-button--primary.is-plain {
  margin-left: 20px;
}
.el-button--danger.is-plain {
  margin-left: 10px;
}
::v-deep .el-form-item__label {
  font-weight: 700px;
}
.el-button.is-circle {
  padding: 7px;
}
.refresh {
  margin-left: 10px;
}
.search {
  margin-left: 960px;
}
::v-deep .el-pagination__total {
margin-left: 881px;
}
::v-deep .el-form-item__label{
margin-left: 41px;
}
.el-upload__text img {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
::v-deep .el-image__inner {
  width: 15px !important;
}
.el-upload__text img {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
::v-deep .el-image__inner {
  width: 15px !important;
}
</style>